<template>
  <view class="back">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="nav-item">要闻</text>
      <text class="nav-item">推荐</text>
      <text class="nav-item">关注流</text>
      <text class="nav-item">24小时</text>
      <text class="nav-item">娱乐</text>
      <text class="nav-item">桂林</text>
      <text class="nav-item">财经</text>
    </view>

    <!-- 城市天气栏 -->
    <view class="weather-bar">
      <text class="weather-text">4℃ 小桂 桂林 PM2.5:9</text>
      <input class="search-input" placeholder="搜索关键词" />
    </view>

    <!-- 更新提示栏 -->
    <view class="update-bar">
      <text class="update-text">为您更新了15条内容</text>
    </view>

    <!-- 新闻列表 -->
    <view class="news-list">
      <!-- 新闻项1（无图） -->
      <view class="news-item">
        <view class="news-content">
          <text class="news-title">2020，我们温暖的记忆</text>
          <view class="news-meta">
            <text class="meta-tag">置顶</text>
            <text class="meta-source">新闻联</text>
            <text class="meta-comments">405评</text>
          </view>
        </view>
      </view>

      <!-- 新闻项2（无图） -->
      <view class="news-item">
        <view class="news-content">
          <text class="news-title">森林大县57年无大火灾怎么做到的</text>
          <view class="news-meta">
            <text class="meta-tag">置顶</text>
            <text class="meta-source">光明网</text>
            <text class="meta-comments">2344评</text>
          </view>
        </view>
      </view>

      <!-- 新闻项3（带图） -->
      <view class="news-item has-img">
        <view class="news-content">
          <text class="news-title">几年近疯狂，涉案金额超3亿，一个“背包客”牵出全国跨省“倒烟”大案</text>
          <view class="news-meta">
            <text class="meta-source">大河网</text>
            <text class="meta-comments">38评</text>
          </view>
        </view>
        <image class="news-img" src="/static/logo.png" mode="widthFix" />
      </view>

      <!-- 新闻项4（带图） -->
      <view class="news-item has-img">
        <view class="news-content">
          <text class="news-title">中国老年化水平加速，论养老保险在中国的重要性？人们应不应该买保险？</text>
          <view class="news-meta">
            <text class="meta-source">新京报</text>
            <text class="meta-comments">58评</text>
          </view>
        </view>
        <image class="news-img" src="/static/quanzhou/city3.png" mode="widthFix" />
      </view>

      <!-- 新闻项5（多图+广告） -->
      <view class="news-item ad-item">
        <text class="news-title">加微信交友群，喜欢就聊，找喜欢的人</text>
        <view class="ad-img-group">
          <image class="ad-img" src="/static/monastery-9939590_1280.webp" mode="widthFix" />
          <image class="ad-img" src="/static/quanzhou/city2.png" mode="widthFix" />
          <image class="ad-img" src="/static/quanzhou/music-poster.png" mode="widthFix" />
        </view>
        <view class="ad-meta">
          <text class="ad-tag">广告</text>
          <text class="ad-source">我主良缘文化</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "NewsPage",
  data() {
    return {};
  }
};
</script>

<style scoped>
/* 全局背景 */
.back {
  background-color: #fff;
  min-height: 100vh;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  padding: 10px 5px;
  gap: 12px;
  font-size: 14px;
  color: #333;
}
.nav-item {
  white-space: nowrap;
}

/* 天气+搜索栏 */
.weather-bar {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background-color: #f5f5f5;
  justify-content: space-between;
}
.weather-text {
  font-size: 12px;
  color: #666;
}
.search-input {
  width: 120px;
  height: 24px;
  font-size: 12px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 更新提示栏 */
.update-bar {
  background-color: #ff9900;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
}

/* 新闻列表容器 */
.news-list {
  padding: 10px;
}

/* 新闻项通用样式 */
.news-item {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
/* 带图新闻的布局 */
.news-item.has-img {
  justify-content: space-between;
}

/* 新闻内容区域 */
.news-content {
  flex: 1;
}
/* 新闻标题 */
.news-title {
  font-size: 15px;
  color: #333;
  line-height: 1.4;
  display: block;
  margin-bottom: 8px;
}
/* 新闻元数据（来源、评论等） */
.news-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #999;
}
/* 置顶标签 */
.meta-tag {
  color: #f00;
  border: 1px solid #f00;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 11px;
}

/* 新闻图片（单图） */
.news-img {
  width: 80px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
}

/* 广告项样式 */
.ad-item {
  display: block;
}
/* 广告多图组 */
.ad-img-group {
  display: flex;
  gap: 5px;
  margin: 8px 0;
}
.ad-img {
  flex: 1;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}
/* 广告元数据 */
.ad-meta {
  font-size: 12px;
  color: #999;
}
.ad-tag {
  color: #666;
}
</style>